<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>患者360视图系统</title>
    <link href="/wwwroot/elementui/theme-chalk/index.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/base.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/ui-base.css" rel="stylesheet"/>
    <link href="/wwwroot/iconfont/iconfont.css?v=100" rel="stylesheet"/>
    <link href="/wwwroot/Styles/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet"/>
    <link href="/wwwroot/Styles/watermarkt.css" rel="stylesheet"/>
    <script src="/wwwroot/Vue/vue.min.js"></script>
    <script src="/wwwroot/Vue/vue-router.js"></script>
    <script src="/wwwroot/Vue/axios.min.js"></script>
    <script src="/wwwroot/Scripts/jquery-2.2.3.min.js"></script>
    <script src="/wwwroot/Scripts/base.js?dt=20201224"></script>
    <script src="/wwwroot/Scripts/xmlhelper.js"></script>
    <script src="/wwwroot/elementui/index.js?p=1"></script>
    <script src="/wwwroot/Scripts/echarts.min.js"></script>
    <script src="/wwwroot/Scripts/waterMark.js"></script>


    <style>
        .test-info > .left .ulTable span {
            width: calc(50% - 20px);
            padding-left: 19px;
        }
    </style>
</head>
<body>
<div id="app" v-cloak class="clinbrain-container test-info patient" v-loading.fullscreen.lock="loading"
     element-loading-text="正在加载数据..." element-loading-background="transparent">
    <div class="header">
        <el-form size="mini" :inline="true">
            <el-form-item label="日期：">
                <el-date-picker type="daterange"
                                range-separator="~"
                                value-format="yyyy-MM-dd"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期" v-model="requestModel.dates">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="requestModel.outpatientDepartment">门诊</el-checkbox>
                <el-checkbox v-model="requestModel.hospitalization">住院</el-checkbox>
                <i class="el-icon-search" v-on:click="getData" style="cursor:pointer"></i>
            </el-form-item>
        </el-form>
    </div>
    <div class="left">
        <div class="clinbrain-card">
            <div class="clinbrain-card-header">
                <div class="title ulTable">
                    <span>申请日期</span>
                    <span>检验项目</span>
                </div>
            </div>
            <div class="clinbrain-card-body">
                <div class="com-not-data" v-if="isNotData">
                    暂无数据
                </div>
                <div class="scrollbar">
                    <!--                    <el-collapse accordion v-model="collapseListValue" v-if="isNotData==false">-->
                    <!--                    <el-collapse-item v-for="(item,index) in testReportData" :title="ModifyConfig.DateRe(item.Title)" :name="index">-->
                    <ul class="ulTable">
                        <li :class="selectedData==child?'is-active':''" v-for="(child,cindex) in TestReportItemAll"
                            v-on:click="listClick(child)">
                            <span>{{child.requestDateTime|formatDate}}</span>
                            <span>{{child.RequestItemName}}</span>

                        </li>
                    </ul>
                    <!--                        </el-collapse-item>-->
                    <!--                </el-collapse>-->
                </div>
            </div>
        </div>
    </div>
    <div id="rightDiv" class="right" style="width:calc(100% - 340px)">
        <div class="header">
            <span :title="item.Name" :class="item==selectedTag?'is-active':''" v-for="(item,index) in tagData"
                  v-on:click="tagClick(item)">{{item.Name|SubStr}}（{{item.Count}}）</span>
            <div class="clear"></div>
        </div>
        <div class="title ulTable">
            <span>项目名称</span>
            <span>检验结果</span>
            <span></span>
            <span>参考值</span>
            <div class="clear"></div>
        </div>
        <div class="com-not-data" v-if="isNotData">
            暂无数据
        </div>
        <div class="scrollbar">
            <el-collapse v-model="collapseDetailValue" accordion v-if="isNotData==false">
                <el-collapse-item v-for="(item,index) in selectedDatas" :name="index">
                    <template slot="title">
                        <span style="font-size:12px;color:#000000;">申请日期：{{item.requestDateTime|formatDate}}  报告类别：{{item.TypeName}}  标本类型：{{item.SpecimenSourceSiteName}} 申请单号：{{item.label}}</span>
                        <span style="font-size:12px;color:#2C8DF4;"
                              v-on:click="applyClick(item)">{{item.ApplyId}}</span>
                    </template>
                    <ul class="ulTable">
                        <li v-for="(citem,cindex) in item.TestReportItemDetail" v-on:click="onDetailClick(citem)">
                            <span>{{citem.LABsubItemNameCN|strEmpty}}</span>
                            <el-tooltip class="item" effect="dark" :content="citem.LABvalue" placement="top-start"
                                        open-delay="800">
                                <span>{{citem.LABvalue|strEmpty}}</span>
                            </el-tooltip>
                            <span v-if="citem.AbnormalFlags=='H'||citem.AbnormalFlags=='h'" style="color:red">↑</span>
                            <span v-else-if="citem.AbnormalFlags=='L'||citem.AbnormalFlags=='l'"
                                  style="color:red">↓</span>
                            <span v-else>{{citem.AbnormalFlags |strEmpty}}</span>
                            <span>{{citem.ReferencesRange|strEmpty}}</span>
                            <div class="clear"></div>
                        </li>
                    </ul>
                </el-collapse-item>
            </el-collapse>
        </div>
        <el-dialog :title="SelectedLabSubItemName" :visible.sync="echartVisible" width="750px"
                   v-loading.fullscreen.lock="chartLoading" element-loading-text="正在加载数据..."
                   element-loading-background="transparent">
            <div v-show="isChartNotData==false" ref="echartDiv" id="echartDiv" style="width:700px; height:300px;"></div>
            <div class="result">检验结果</div>
            <div class="testdate">检验日期</div>
            <div class="com-not-data" v-show="isChartNotData" style="height:350px;">
                暂无数据
            </div>
        </el-dialog>
        <el-dialog :visible.sync="applyVisible" title="检验申请单">
            <iframe :src="appUrl" style="width:100%;height:550px; margin:0px; padding:0px; border:none; "
                    frameborder="0" scrolling="auto"></iframe>
        </el-dialog>
    </div>
    <div class="clear"></div>
</div>
</body>

<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data() {
            return {
                appUrl: '',
                applyVisible: false,
                testReportData: [],
                TestReportItemAll: [],
                selectedData: {},
                selectedDatas: [],
                tagData: [],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                loading: false,
                isNotData: true,
                selectedTag: {},//选中的标签
                collapseListValue: [0],//展开列表值
                collapseDetailValue: [0],//展开明细值
                echartVisible: false,//趋势图是否显示
                requestModel: {dates: [], outpatientDepartment: true, hospitalization: true},
                SelectedLabSubItemName: "",//选中指标名称
                chartLoading: true,//趋势图是否正在加载数据
                isChartNotData: true//趋势图是否无数据
            };
        },
        methods: {
            applyClick(item) {
                if (item.ApplyId == "")
                    return false;
                this.applyVisible = true;
                this.appUrl = '/CDR/TestReport/Apply/?applyId=' + item.ApplyId + '&patientId=' + clinBrain.getParam("patientId") + '&visitNumber=' + clinBrain.getParam("visitNumber") + '&oporIp=' + clinBrain.getParam("oporIp");
            },
            getDate(index) {
                if (this.requestModel.dates && this.requestModel.dates.length >= index + 1) {
                    return this.requestModel.dates[index];
                }
                return null;
            },
            toTree(data, id, pid) {
                let result = []
                if (!Array.isArray(data)) {
                    return result
                }
                let map = {};
                data.forEach(item => {
                    map[item[id]] = item;
                });
                data.forEach(item => {
                    let parent = map[item[pid]];
                    if (parent) {
                        (parent.children || (parent.children = [])).push(item);
                    } else {
                        result.push(item);
                    }
                });
                return result;
            },
            getData() {
                var _this = this;
                var medicalTypes = [];
                if (this.requestModel.outpatientDepartment) {
                    medicalTypes.push(1);
                }
                if (this.requestModel.hospitalization) {
                    medicalTypes.push(2);
                }
                this.loading = true;
                this.collapseListValue = [0];//展开列表值
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.TestReportInfo",
                        params: {
                            patientId: clinBrain.getParam("patientId"),
                            opOrIp: clinBrain.getParam("oporIp"),
                            medicalType: medicalTypes,
                            startDate: this.getDate(0),
                            endDate: this.getDate(1)
                        }
                    },
                    success: function (resp) {
                        _this.loading = false;
                        var TestReportData = resp.data;

                        TestReportData.Data.forEach(item => {
                            item.TestReportItem = item.children
                            item.TestReportItem.forEach(item => {
                                item.TestReportItemDetail = item.children
                            })
                        })
                        resp.data.TagData = [{
                            Name: '所有',
                            Count: TestReportData.Data.length
                        }]
                        _this.isNotData = !TestReportData.Data || TestReportData.Data.length == 0;
                        _this.testReportData = TestReportData.Data;
                        _this.TestReportItemAll = [];
                        for (var i = 0; i < _this.testReportData.length; i++) {
                            var item = _this.testReportData[i];
                            for (var j = 0; j < item.TestReportItem.length; j++) {
                                _this.TestReportItemAll.push(item.TestReportItem[j]);
                            }
                        }
                        _this.tagData = resp.data.TagData;
                        if (_this.tagData && _this.testReportData.length > 0) {
                            _this.selectedData = _this.testReportData[0].TestReportItem[0];
                            _this.listClick(_this.testReportData[0].TestReportItem[0]);
                            _this.selectedTag = _this.tagData[0];
                        }
                    }
                }, this);
            },
            listClick(item) {
                this.collapseDetailValue = [0];//展开明细值
                this.selectedData = item;
                this.selectedDatas = [];
                this.selectedDatas.push(item);
            },
            /**
             *上面标签点击事件
             */
            tagClick(item) {
                this.collapseDetailValue = [0];//展开明细值
                this.selectedData = {};
                this.selectedDatas = [];
                var _this = this;
                this.selectedTag = item;
                this.testReportData.forEach(function (model) {
                    var where = "$.TypeName=='{Name}'||'{Name}'=='所有'".format(item);
                    _this.selectedDatas.addRange(model.TestReportItem, where);
                });
            },
            /**
             * 明细点击事件
             * item选中的指标数据
             */
            onDetailClick(item) {
                this.echartVisible = true;
                var _this = this;
                this.SelectedLabSubItemName = item.LABsubItemNameCN;
                this.isChartNotData = true;
                this.chartLoading = true;
                clinBrain.request({
                    url: "/pms/query",
                    params: {
                        code: "com.base.api.cdr.TestReportInfoDetail",
                        params: {
                            patientId: clinBrain.getParam("patientId"),
                            LabSubItemCode: item.labsubitemcode
                        }
                    },
                    loading: true,
                    loadingText: "正在查询数据...",
                    success: function (resp) {
                        _this.chartLoading = false;
                        var chartData = [];
                        _this.isChartNotData = !resp.data.Data || resp.data.Data.length == 0;
                        resp.data.Data.forEach(function (i) {
                            chartData.push({
                                Name: i.LABsubItemNameCN.format("yyyy-MM-dd"),
                                Count: clinBrain.bindEcharline(i.LABvalue),
                                Range: i.ReferencesRange
                            });
                        });
                        //初始化趋势图
                        if (!_this.isChartNotData) {
                            var e = document.getElementById("echartDiv");
                            clinBrain.convertLinChart("", echarts.init(e), chartData, true);
                        }

                    }
                }, this);
            },
            bindItemTitle(item) {
                var temp = "报告日期：{ReportedDateTime}  报告类别：{TypeName}  标本类型：{SpecimenSourceSiteName} 申请单号：{ApplyId}";
                return temp.format(item).replace('1900-01-01 00:00:00', '-');
            }
        },
        created: function () {
            this.getData();
        },
        filters: {
            formatDate(date) {
                if (date == '-')
                    return '-'
                else if (date)
                    return new Date(date).format("yyyy-MM-dd hh:mm:ss");
            },
            strEmpty(val) {
                return val ? val : '--';
            },
            SubStr(val) {
                if (val != null && val.length > 4)
                    return val.substring(0, 4) + '..';
                return val;
            },
            GetTitle(item) {
                var oporip = item.TestReportItemDetail[0].OPorIP == "IP" ? '住院' : '门诊';
                return ModifyConfig.DateToDate(item.RequestDateTime) + '-' + item.RequestItemName + '-' + oporip;
            }
        }
    });
</script>
<script type="text/javascript">
    var watermsg = HospitalConfig.FullName + '：' + '@ViewBag.UserId';
    $(function () {
        setTimeout(function () {
            if (HospitalConfig.IsBLSY)
                waterMark$($("#rightDiv"), watermsg);
        }, 500);

    });
    window.onresize = function () {
        if (HospitalConfig.IsBLSY)
            waterMark$($("#rightDiv"), watermsg);
    }
</script>
</html>


